<template>
	<div class="edit-food-wrapper">
		<header>
			<i @click="togoBack">&#8249;</i>
			<p>编辑食物信息</p>
		</header>
		<div class="edit-form">
			<label>食物名称:</label>
			<input v-model="food.foodName" />
			<label>食物说明:</label>
			<textarea v-model="food.foodExplain"></textarea>
			<label>食物价格:</label>
			<input type="number" v-model="food.foodPrice" />
			<label>食物数量:</label>
			<input type="number" v-model="food.foodCount" />
			<label>商家信息:</label>
			<input type="number" v-model="food.businessId" />
			<label>食物图片URL:</label>
			<input v-model="food.foodImg" />
			<label>备注:</label>
			<input v-model="food.remarks" />
			<button @click="saveFood">保存修改</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'EditFood',
		data() {
			return {
				foodId: this.$route.query.foodId,
				food: {
					foodName: '',
					foodExplain: '',
					foodPrice: 0,
					foodCount: 0,
					foodImg: '',
					businessId: '',
					remarks: ''
				}
			};
		},
		created() {
			// 根据 foodId 获取食物信息
			this.$axios.get('Food/FoodId', {
					params: {
						foodId: this.foodId
					}
				})
				.then((response) => {
					this.food = response.data;
				})
				.catch((error) => {
					console.error(error);
				});
		},
		methods: {
			togoBack() {
				this.$router.go(-1);
			},
			// 保存修改后的食物信息
			saveFood() {
				// 构造食物对象，包括 foodId


				// 发送 PUT 请求以更新食物信息
				this.$axios.put('Food/FoodId', this.$qs.stringify({
						foodId: this.foodId,
						foodName: this.food.foodName,
						foodExplain: this.food.foodExplain,
						foodPrice: this.food.foodPrice,
						foodCount: this.food.foodCount,
						foodImg: this.food.foodImg,
						businessId: this.food.businessId,
						remarks: this.food.remarks
					}))
					.then((response) => {
						console.log('PUT request successful, response:', response);
						alert('保存成功');
						this.$router.go(-1); // 返回上一页
					})
					.catch((error) => {
						console.error('保存失败:', error);
						alert('保存失败，请重试');
					});
			}
		}
	};
</script>


<style scoped>
	/* 容器样式 */
	.edit-food-wrapper {
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}

	/* header部分 */
	.edit-food-wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097ff;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		padding-left: 2vw;
	}

	.edit-food-wrapper header i {
		font-size: 10vw;
		user-select: none;
		cursor: pointer;
	}

	.edit-food-wrapper header p {
		margin-left: 35vw;
	}

	/* 表单部分 */
	.edit-form {
		margin-top: 14vw;
		padding: 4vw;
		display: flex;
		flex-direction: column;
	}

	.edit-form label {
		font-size: 4vw;
		color: #333;
		margin-bottom: 2vw;
	}

	.edit-form input,
	.edit-form textarea {
		width: 100%;
		padding: 3vw;
		margin-bottom: 4vw;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 4vw;
		box-sizing: border-box;
	}

	.edit-form input:focus,
	.edit-form textarea:focus {
		border-color: #0097ff;
		outline: none;
	}

	/* 输入框样式 */
	.edit-form input[type="number"] {
		-webkit-appearance: none;
		-moz-appearance: textfield;
	}

	/* 提交按钮 */
	.edit-form button {
		width: 100%;
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		font-size: 4.5vw;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		text-align: center;
	}

	.edit-form button:hover {
		background-color: #007acc;
	}

	/* 适配移动端 */
	@media (max-width: 768px) {
		.edit-form label {
			font-size: 5vw;
		}

		.edit-form input,
		.edit-form textarea {
			font-size: 5vw;
			padding: 4vw;
		}

		.edit-form button {
			font-size: 5vw;
			padding: 4vw;
		}
	}
</style>